<template>
  <el-card shadow="hover">
    <div slot="header">
      <span>{{this.info.jiqiname}}</span> 
    </div>
    <el-row :gutter="20">
      <el-col :span="10">
        <el-table :data="weatherStationState" :header-cell-style="{background:'#f5f7fa'}" border class="weather-station-table">
          <el-table-column label="参数" align="center">
            <template slot-scope="scope">
              <el-button 
                type="text"
                @click="stateClick(scope)"
                v-if="scope.row.key  != 'winddirection' && scope.row.value  !== ''">
                {{scope.row.name}} 
              </el-button>
              <span v-else>{{scope.row.name}}</span> 
            </template>
          </el-table-column>
          <el-table-column prop="value" label="数值" align="center"></el-table-column>
        </el-table>
      </el-col>
      <el-col :span="14">
        <el-date-picker 
          v-model="activeDate"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期"
          size="small"
          class="date-picker"
          @change="dateClick"></el-date-picker>
        <div class="chart" :id="info.fd_id+info.species"></div> 
      </el-col>
    </el-row>
  </el-card>
</template>
 
<script>
const echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/line");
require("echarts/lib/component/tooltip");
 
export default {
  props: {
    info: {
      type: Object 
    }
  },
  data() {
    return {
      activeDate: "",
      activeKey: "temperature",
      option: {
        tooltip: {
          trigger: "axis"
        },
        grid: {
          x: 40,
          y: 40,
          x2: 40,
          y2: 40 
        },
        xAxis: {
          name: "时间",
          type: "category",
          boundaryGap: false,
          data: []
        },
        yAxis: {
          name: "温度",
          type: "value"
        },
        series: [
          {
            data: [],
            type: "line"
          }
        ]
      },
      // 模拟气象站图表数据 
      mockChartData: {
        "temperature": [
          { date: "2023-06-01 08:00", value: 22.5 },
          { date: "2023-06-01 12:00", value: 25.3 },
          { date: "2023-06-01 16:00", value: 26.1 },
          { date: "2023-06-01 20:00", value: 23.8 }
        ],
        "humidity": [
          { date: "2023-06-01 08:00", value: 65 },
          { date: "2023-06-01 12:00", value: 60 },
          { date: "2023-06-01 16:00", value: 70 },
          { date: "2023-06-01 20:00", value: 68 }
        ],
        "windspeed": [
          { date: "2023-06-01 08:00", value: 3.2 },
          { date: "2023-06-01 12:00", value: 4.5 },
          { date: "2023-06-01 16:00", value: 5.1 },
          { date: "2023-06-01 20:00", value: 2.8 }
        ],
        "rainfall": [
          { date: "2023-06-01 08:00", value: 0.5 },
          { date: "2023-06-01 12:00", value: 0.2 },
          { date: "2023-06-01 16:00", value: 1.8 },
          { date: "2023-06-01 20:00", value: 0.0 }
        ],
        "illuminance": [
          { date: "2023-06-01 08:00", value: 850 },
          { date: "2023-06-01 12:00", value: 1200 },
          { date: "2023-06-01 16:00", value: 950 },
          { date: "2023-06-01 20:00", value: 200 }
        ],
        "pressure": [
          { date: "2023-06-01 08:00", value: 1012.5 },
          { date: "2023-06-01 12:00", value: 1011.8 },
          { date: "2023-06-01 16:00", value: 1010.2 },
          { date: "2023-06-01 20:00", value: 1013.0 }
        ]
      }
    }
  },
  computed: {
    weatherStationState() {
      return [{
        name: '降雨量',
        key: 'rainfall',
        value: this.info.rainfall  || '0.5mm'
      },{
        name: '光照度',
        key: 'illuminance',
        value: this.info.illuminance  || '850Lux'
      },{
        name: '温度',
        key: 'temperature',
        value: this.info.temperature  || '24.5℃'
      },{
        name: '风速',
        key: 'windspeed',
        value: this.info.windspeed  || '3.2m/s'
      },{
        name: '湿度',
        key: 'humidity',
        value: this.info.humidity  || '65%'
      },{
        name: '气压',
        key: 'pressure',
        value: this.info.pressure  || '1012.5hPa'
      },{
        name: '风向',
        key: 'winddirection',
        value: this.info.winddirection  || '东南风'
      }]
    }
  },
  methods: {
    // 模拟获取图表数据 
    getChartData(id, key, date) {
      // 模拟API延迟 
      setTimeout(() => {
        this.option.xAxis.data  = [];
        this.option.series[0].data  = [];
        
        // 使用模拟数据 
        const data = this.mockChartData[key]  || [];
        
        data.forEach(item  => {
          this.option.xAxis.data.push(item.date.substr(11,  8));
          this.option.series[0].data.push(item.value); 
        });
        
        this.draw(); 
      }, 300);
    },
    
    draw() {
      const myChart = echarts.init(document.getElementById(this.info.fd_id  + this.info.species)); 
      myChart.setOption(this.option); 
      // 响应式调整图表大小 
      window.addEventListener('resize',  () => {
        myChart.resize(); 
      });
    },
    
    getNowDate() {
      const date = new Date();
      const year = date.getFullYear(); 
      const month = String(date.getMonth()  + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2,  '0');
      return `${year}-${month}-${day}`;
    },
    
    stateClick(scope) {
      this.activeKey  = scope.row.key; 
      this.option.yAxis.name  = scope.row.name; 
      this.getChartData(this.info.fd_id,  this.activeKey,  this.activeDate); 
    },
    
    dateClick() {
      this.getChartData(this.info.fd_id,  this.activeKey,  this.activeDate); 
    }
  },
  mounted() {
    this.activeDate  = this.getNowDate(); 
    this.getChartData(this.info.fd_id,  this.activeKey,  this.activeDate); 
  }
}
</script>
 
<style scoped>
.chart {
  height: 450px;
  width: 100%;
}
.date-picker {
  margin-bottom: 15px;
}
.weather-station-table {
  width: 100%;
}
</style>